<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>接口调试</title>
        <%- include('../layout/common-css.html');%>
        <style type="text/css">
            .am-panel{
                margin-left: 0.5rem;
                margin-right: 0.5rem; 
            }
        </style>
    </head>
    <body>
        <%- include('../layout/header.html');%>
        <div class="am-panel am-panel-default">
            <div class="am-panel-bd">
                <div class="am-g">
                    <div class="am-u-sm-2">
                        <label am-form-label>选择接口</label>
                    </div>
                    <div class="am-u-sm-3">
                        <div class="am-form-group">
                            <select id="category" data-am-selected>
                                <optgroup label="所有类别">
                                    <option value="ALL" selected="selected">选择类别</option>
                                </optgroup>
                                <%for(let z of data_zone){%>
                                  <optgroup label="<%=z['name']%>">
                                    <%for(let c of z['categories']){%>
                                        <option value="<%=c%>"><%=c%></option>
                                    <%}%>
                                  </optgroup>
                                <%}%>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-2">
                        <div class="am-form-group">
                            <select id="rules" data-am-selected>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-3">
                        <div class="am-form-group">
                            <input type="text" id="rule" class="am-form-field" placeholder="数据项ID">
                        </div>
                    </div>
                    <div class="am-u-sm-2">
                        <div class="am-form-group">
                            <select id="type" data-am-selected>
                                <option value="get">接口类别</option>
                                <option value="get">获取历史数据(GET)</option>
                                <option value="call">调用函数(POST/GET)</option>
                                <option value="show">嵌入显示(GET)</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div><pre id="cmt"></pre></div>
            </div>
        </div>
        <div class="am-panel am-panel-default">
            <div class="am-panel-bd">
                <div class="am-g">
                    <div class="am-u-sm-3">
                        <label am-form-label>请求地址：</label>
                    </div>
                    <div class="am-u-sm-9">
                        <div class="am-form-group">
                            <input type="text" id="address" class="am-form-field" placeholder="请求地址">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="am-panel am-panel-default" style="display: none;" id="data_pn">
            <div class="am-panel-bd">
                <div class="am-g">
                    <div class="am-u-sm-3">
                        <label am-form-label>请求数据(JSON)：</label>
                    </div>
                    <div class="am-u-sm-9">
                        <div class="am-form-group">
                             <textarea class="" style="width: 100%;height: 15rem;" id="data">{

}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="am-panel am-panel-default">
            <div class="am-panel-bd">
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <button type="button" class="am-btn am-btn-danger am-btn-block" onclick="fire();" id="run"><i class="am-icon-fire"></i>发送请求</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="am-panel am-panel-default">
            <div class="am-panel-bd">
                <div class="am-g">
                    <div class="am-u-sm-3">
                        <label am-form-label>返回结果(JSON)：</label>
                    </div>
                    <div class="am-u-sm-9">
                        <div class="am-form-group">
                             <textarea class="" style="width: 100%;height: 25rem;" id="ret"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%- include('../layout/bottom-js.html');%>
        <script type="text/javascript">
            var url_prefix = '<%=url_prefix%>';
            let comments = {};

            var updateURL = function(){
                var url = url_prefix+'/provider/'+$('#type').val()+'/'+$('#rule').val();
                $('#cmt').html(comments[$('#rule').val()]||'');
                if($('#type').val()=='call')$('#data_pn').show();
                else if($('#type').val()=='get'){
                    $('#data_pn').hide();
                    url += '?pagesize=20&pagenum=1&version=';
                    $('#cmt').html('参数说明：pagesize和pagenum是指定分页参数决定返回的数据量；version是指定数据版本，留空表示不指定版本返回最后版本数据。');
                }else if($('#type').val()=='show') {
                    $('#data_pn').hide();
                    url += '?version=&bind=&auth=c2NyaXB0OjEyMzQ1Ng==';
                    $('#cmt').text('此接口用于html页面中嵌入显示数据，只返回一个版本的数据。\n参数说明：\nversion是指定数据版本，留空表示不指定版本返回最后版本数据；\nbind是绑定一个html元素，将返回内容渲染到指定元素上。\n使用方法：\n在页面源代码引入js代码<script src="'+url+'"><\/script>');
                }
                $('#address').val(url);
            }

            var fire = function(){
                var options = {
                    method: $('#type').val()=='call' ? "POST" : 'GET',
                    url: $('#address').val(),
                    data: JSON.parse($('#data').val())
                  }
                if($('#type').val()=='show')options['dataType'] = 'text';
                $.ajax(options)
                  .done(function(msg) {
                    $('#ret').val(msg?($('#type').val()=='show'?msg:JSON.stringify(msg, null, 4)):'无结果');
                  }); 
            }

            $(function(){
                $('#category').change(function() {
                  $.ajax({
                    method: "POST",
                    url: "/provider/ajax/rules",
                    data: {'category': $(this).val() }
                  })
                  .done(function(msg) {
                    $('#rules').empty();
                    if(msg && msg.length>0){
                        comments = {};
                        for(var k of msg){
                           $('#rules').append('<option value="'+k['_id']+'">'+k['name']+'</option>'); 
                           if(k['code'])comments[k['_id']] = k['code'];
                        }
                        $('#rule').val(msg[0]['_id']);
                    }
                  });
                });

                $('#type').change(function() {
                    updateURL();
                });

                $('#rules').change(function() {
                    $('#rule').val($(this).val());
                    updateURL();
                });

                $('#rule').change(function() {
                    updateURL();
                });
            });
        </script>
</body>
</html>